<script setup lang="ts">
import FinAccountFormPanel from './FinAccountFormPanel.vue'
import { FinAccountApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useTable } from '@/hooks'
import { useUserStore } from '@/stores'

defineOptions({
  name: 'Account',
})

const userStore = useUserStore()
const queryForm = reactive<FinAccountApi.FinAccountQuery>({
  status: 1,
})

const {
  tableData: dataList,
  loading,
  search,
  handleDelete,
} = useTable(() => FinAccountApi.getList({ ...queryForm }), { immediate: true })

const columns: TableInstanceColumns[] = [
  { title: '名称', dataIndex: 'name', slotName: 'name' },
  { title: '账户', dataIndex: 'account', slotName: 'account' },
  { title: '状态', dataIndex: 'status', slotName: 'status' },
  { title: '备注', dataIndex: 'remark', slotName: 'remark', render: ({ record }) => record.remark || '--' },
  {
    title: '操作',
    slotName: 'action',
    width: 120,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['system:finAccount:write']),
  },
]

const checkFlag = ref(false)
const handleCheck = () => {
  checkFlag.value = !checkFlag.value
  queryForm.status = checkFlag.value ? undefined : 1
  search()
}

// 删除
const onDelete = (item: FinAccountApi.FinAccountResp) => {
  return handleDelete(() => FinAccountApi.remove(item.id), {
    content: `是否确定删除[${item.name}]？`,
    showModal: true,
  })
}

// 新增
const FinAccountFormPanelRef = ref<InstanceType<typeof FinAccountFormPanel>>()
const onAdd = () => {
  FinAccountFormPanelRef.value?.create()
}

// 详情
const onRowClick = (row) => {
  FinAccountFormPanelRef.value?.open(row.id)
}
</script>

<template>
  <ProPage title="财务账户" description="对财务账户进行管理">
    <template #extra>
      <a-button v-permission="['system:fin-account:manage']" type="primary" @click="onAdd">
        <template #icon>
          <icon-plus />
        </template>
        <template #default>
          创建财务账户
        </template>
      </a-button>
    </template>
    <ProTable
      row-key="id" :data="dataList"
      :columns="columns" :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="false"
      @row-click="onRowClick"
      @refresh="search"
    >
      <template #toolbar-left>
        <a-input v-model="queryForm.name" placeholder="请输入关键字" allow-clear @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
        <a-checkbox :default-checked="checkFlag" @change="handleCheck">
          展示所有财务账户
        </a-checkbox>
      </template>
      <template #status="{ record }">
        <CellStatus :status="record.status" />
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['system:fin-account:manage']" status="danger" @click.stop="onDelete(record)">
            删除
          </a-link>
        </a-space>
      </template>
    </ProTable>
    <FinAccountFormPanel ref="FinAccountFormPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped></style>
